<template>
<div class="box-container">
    <!-- 管理员登录 -->
    <div class="form" v-show="isAdmin">
        <div class="title">管理员登录</div>
        <div class="body">
            <!-- 绑定数据模型admin -->
            <el-form class="el-form" label-width="60px" :model="admin" :rules="rules">
                <el-form-item label="用户名">
                    <el-input
                    v-model="admin.name"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                    v-model="admin.password"
                    show-password
                    type="password"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="buttons">
            <el-button class="custom-button" style="width: 40%" @click="adminLogin">登录</el-button>
            <el-button class="custom-button" style="width: 40%" @click="resetAdminForm">重置</el-button>
        </div>
        <div class="link">
            <el-link class="inner-link" @click="isUserLogin">用户登录</el-link>
        </div>
    </div>

    <!-- 用户登录 -->
    <div class="form" v-show="isUser">
        <div class="title">用户登录</div>
        <div class="body">
            <el-form class="el-form" label-width="60px" :model="user" :rules="rules">
                <el-form-item label="用户名">
                    <el-input
                    v-model="user.name"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                    v-model="user.password"
                    show-password
                    type="password"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="buttons">
            <el-button class="custom-button" style="width: 40%" @click="userLogin">登录</el-button>
            <el-button class="custom-button" style="width: 40%" @click="resetUserForm">重置</el-button>
        </div>
        <div class="link" style="margin-top: 20px;">
            <el-link class="inner-link" @click="isAdminLogin">管理员登录</el-link>
        </div>
        <div class="link" style="margin-top: 10px;">
            没有账号？<el-link class="inner-link" @click="isUserRegister">立即注册</el-link>
        </div>
    </div>

    <!-- 用户注册 -->
    <div class="form" v-show="isRegister">
        <div class="title">用户注册</div>
        <div class="body">
            <el-form class="el-form" label-width="60px" :model="registerForm" :rules="rules">
                <el-form-item label="用户名">
                    <el-input
                    v-model="registerForm.name"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                    v-model="registerForm.password"
                    show-password
                    type="password"
                    autocomplete="off"
                    style="width: 340px;"
                    placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="buttons">
            <el-button class="custom-button" style="width: 40%" @click="userRegister">注册</el-button>
            <el-button class="custom-button" style="width: 40%" @click="resetRegister">重置</el-button>
        </div>
        <div class="link" style="margin-top: 20px;">
            <el-link class="inner-link" @click="isAdminLogin">管理员登录</el-link>
        </div>
        <div class="link" style="margin-top: 10px;">
            已有账号？<el-link class="inner-link" @click="isUserLogin">立即登录</el-link>
        </div>
    </div>

</div>
</template>
  
<script setup>
import { ref } from 'vue';
import request from "@/utils/request";
import { useRouter } from 'vue-router'
const router = useRouter();
import { ElMessage } from 'element-plus'; // 导入 Element Plus 的消息提示

const isAdmin = ref(true);
const isUser = ref(false);
const isRegister = ref(false);
// 管理员表单初始数据
const admin = ref({
    name: '',
    password: ''
});
// 用户表单
const user = ref({
    name: '',
    password: '',
});
const registerForm = ref({
    name: '',
    password: ''
});

const rules = {
    password: [
        { message:'请输入密码', trigger:'blur' },
        { 
            pattern:/^\S{3,10}$/,
            message:'密码必须是3-10位',
            trigger:'change'
        }
    ]
} 


const isUserLogin = () => {
    isAdmin.value = false;
    isRegister.value = false;
    isUser.value = true;
};

const isAdminLogin = () => {
    isAdmin.value = true;
    isRegister.value = false;
    isUser.value = false;
};

const isUserRegister = () => {
    isRegister.value = true;
    isAdmin.value = false;
    isUser.value = false;
};

// 管理员表单重置
const resetAdminForm = () => {
    // 视图上也重置
    admin.value.name = '';
    admin.value.password = '';
}
// 管理员登录 http请求 异步
const adminLogin = async() => {
    try {
        const res = await request.post('/admin/login', admin.value)
        if(res.code === '0') {
            // 返回成功消息
            ElMessage({
                message: '登录成功',
                type: 'success'
            });
            // 将后端获取到的信息存入localStorage
            localStorage.setItem('admin', JSON.stringify(res.data)) // json形式
            // 跳转到管理员首页
            router.push('/admin')
        } else {
            ElMessage({
                message: res.msg,
                type: 'error'
            });
        }
    } catch (error) {
        // 处理请求错误
        ElMessage({
            message: '登录失败，请重试',
            type: 'error'
        });
    }
}


const resetUserForm = () => {
    user.value.name = '';
    user.value.password = '';
}
const userLogin = async() => {
    try {
        const res = await request.post('/user/login', user.value)
        if(res.code === '0') {
            // 返回成功消息
            ElMessage({
                message: '登录成功',
                type: 'success'
            });
            // 将后端获取到的信息存入localStorage
            localStorage.setItem('admin', JSON.stringify(res.data)) // json形式
            // 跳转到管理员首页
            router.push('/user')
        } else {
            ElMessage({
                message: res.msg,
                type: 'error'
            });
        }
    } catch (error) {
        // 处理请求错误
        ElMessage({
            message: '登录失败，请重试',
            type: 'error'
        });
    }
}

const resetRegister = () => {
    registerForm.value.name = '';
    registerForm.value.password = '';
}

const userRegister = async() => {
    try {
        const res = await request.post('/user/register', registerForm.value);
        if(res.code === '0') {
            ElMessage({
                message: '注册成功',
                type: 'success'
            });
            isUserLogin();
        } else {
            ElMessage({
                message: res.msg,
                type: 'error'
            });
        }
    } catch (error) {
        ElMessage({
            message: '注册失败，请重试',
            type: 'error'
        });
    } 
}

</script>
  
<style lang="less" scoped>
.box-container {
    width: 100%;
    height: 100vh;
    background-image: url('@/assets/login.png');
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.form {
    position: absolute;
    top: 20vh;
    right: 30vw;
    width: 40vw;
    height: 50vh;
    border-radius: 12px;
    background-color: #ffffff6b; /* 背景色带透明度 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中子元素 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    .title {
        height: 25px;
        margin: 47px;
        color: white;
        font-size: 30px;
        text-align: center;
        font-family: SourceHanSansSC-bold;
    }
    .body {
        margin-top: 10px;
    }
    .link {
        align-self: flex-end;
        margin-right: 80px;
        font-size: 14px;
    }
}

.buttons {
    text-align: center;
    width: 300px;
    margin-top: 30px;
}

.custom-button {
    background-color: #ab6d3a6d; /* 背景颜色 */
    color: white; /* 字体颜色 */
    border: none; /* 去掉边框 */
}


</style>
  